<template>
  <view class="page-wapper ss-p-20" style="box-sizing: border-box">
    <globalheader title="我的粉丝"></globalheader>

    <view class="fans-list">
      <view class="fans-title ss-flex"> 粉丝列表 </view>
      <view class="list ss-p-b-30">
        <view class="c_list" v-for="i in state.pagination.data">
          <image :src="i.avatar" mode=""></image>
          <view class="right-c ss-flex-1">
            <view class="top-a ss-flex ss-row-between">
              <view class="nickname">{{ i.nickname }}</view>
              <view class="create_time">{{ i.createtime }}</view>
            </view>
            <view class="top-b ss-flex ss-row-between ss-m-t-20">
              <view class="mobile">{{ i.mobile }}</view>
              <u-tag text="有效用户" v-if="i.is_yxuser" bgColor="#3647EE" size="mini" borderColor="#3647EE" color="#fff"></u-tag>
              <u-tag text="无效用户" v-else size="mini" bgColor="#9d9d9d" borderColor="#9d9d9d" color="#000000"></u-tag>
              <u-tag :text="i.group_name" v-if="i.group_name" type="warning" size="mini" borderColor="#3647EE" color="#3647EE" plain></u-tag>
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
  import { computed, reactive, ref, onBeforeUnmount, onMounted, getCurrentInstance, nextTick } from 'vue';
  import _ from 'lodash';
  import sheep from '@/sheep';
  import { onLoad, onReachBottom } from '@dcloudio/uni-app';
  const pagination = {
    data: [],
    current_page: 1,
    total: 1,
    last_page: 1,
    expense: 0,
    income: 0,
  };

  const state = reactive({
    currentTab: 0,
    pagination,
    jss: '0',
    loadStatus: '',
    date: [],
    obj: {},
    today: '',
  });
  onLoad(async () => {
    // let res = await sheep.$api.user.groupwhe({});
    // if (res.code === 1) {
    // 	state.obj=res.data
    // }
  });
  async function getLogList(page = 1, list_rows = 15) {
    state.loadStatus = 'loading';

    let res = await sheep.$api.user.sharelog({
      type: 'income',
      list_rows,
      page,
    });
    if (res.code === 1) {
      let list = _.concat(state.pagination.data, res.data.data);
      state.pagination = {
        ...res.data,
        data: list,
      };
      if (state.pagination.current_page < state.pagination.last_page) {
        state.loadStatus = 'more';
      } else {
        state.loadStatus = 'noMore';
      }
    }
  }
  onLoad(async (options) => {
    getLogList();
  });

  function onChange(e) {
    state.pagination = pagination;
    state.currentTab = e.index;
    getLogList();
  }

  function onLoadMore() {
    if (state.loadStatus !== 'noMore') {
      getLogList(state.pagination.current_page + 1);
    }
  }
  onReachBottom(() => {
    onLoadMore();
  });
</script>

<style lang="scss" scoped>
  .fans-list {
    background: #ffffff;
    border-radius: 24rpx;
    padding: 0 30rpx;
    padding-top: 30rpx;
    .fans-title {
      margin-bottom: 30rpx;
      image {
        width: 42rpx;
        height: 42rpx;
      }
      font-weight: 600;
      font-size: 34rpx;
      color: #181818;
    }
    .c_list {
      display: flex;
      border-bottom: #e6e6e6 2rpx solid;
      padding: 24rpx 0;
      image {
        margin-right: 12rpx;
        border-radius: 50%;
        width: 96rpx;
        height: 96rpx;
      }
      .right-c {
        .top-a {
          .nickname {
            font-weight: 500;
            font-size: 30rpx;
            color: #181818;
            line-height: 35rpx;
          }
          .create_time {
            font-size: 22rpx;
            color: #999999;
            line-height: 26rpx;
          }
        }
        .top-b {
          .mobile {
            font-weight: 400;
            font-size: 26rpx;
            color: #5a5a5a;
            line-height: 30rpx;
          }
          .create_time {
            font-size: 22rpx;
            color: #999999;
            line-height: 26rpx;
          }
        }
      }
    }
  }
  .tx-waper {
    // background-image: url(/static/sjtzbg.png);
    background-size: 100% 100%;
    padding: 26rpx;
    background-repeat: no-repeat;
    .title-a {
      font-weight: 600;
      font-size: 32rpx;
      color: #ffffff;
      image {
        width: 44rpx;
        height: 44rpx;
      }
    }
    .sub-a {
      .title {
        font-size: 28rpx;
        color: #ffffff;
        line-height: 33rpx;
      }
      .jd {
        width: 282rpx;
        .jdtitle {
          text {
            font-size: 40rpx;
            color: #ffffff;
            line-height: 47rpx;
          }
          font-size: 28rpx;
          color: #ffffff;
          line-height: 47rpx;
        }
      }
    }
  }
</style>
